<template>
  <SystemItem title="主题设置">
    <div class="flex flex-row justify-start items-center gap-4">
      <div v-for="(item, index) in themeColors" :key="index" class="cursor-pointer" @click="system.Theme = item.name">
        <template v-if="item.name === Etheme.Os">
          <div :class="ActiveTheme(item.name)" class="w-[120px] h-[100px] grid grid-cols-2 rounded overflow-hidden">
            <div class="w-full h-full bg-light"></div>
            <div class="w-full h-full bg-dark"></div>
          </div>
        </template>
        <template v-else>
          <div :class="[item.color, ActiveTheme(item.name)]" class="w-[120px] h-[100px] rounded"></div>
        </template>
        <p class="text-xs text-center text-fontSecondary mt-2">{{ item.label }}</p>
      </div>
    </div>
  </SystemItem>
</template>

<script setup lang="ts">
import { useSystem } from "@/store/modules/system";
import { Etheme } from "@/types/common";
import SystemItem from "../components/SystemItem.vue";
import { computed } from "vue";
import { IThemeColors } from "@/types/system";
const system = useSystem();
const ActiveTheme = computed(() => {
  return function (current: Etheme) {
    return system.Theme == current ? "activeTheme" : "";
  };
});

withDefaults(
  defineProps<{
    title: string;
    themeColors: IThemeColors[];
  }>(),
  {
    title: "主题设置",
    themeColors: () => [],
  },
);
</script>

<style lang="scss" scoped>
.activeTheme {
  border: 2px solid skyblue;
}
</style>
